<template>
	<!-- 友伴官的艺人 -->
	<view class="artist-list-box">
		
		<view class="content">
			<view class="item" v-for="(item,index) in listData" :key="item.id">
				<ListItem :data="item"></ListItem>
			</view>
		</view>
		
		<noData v-if="listData.length < 1"></noData>
	</view>
	
</template>

<script>
	import ListItem from './components/list-item.vue'
	
	export default {
		name: "artistListBox",
		props: {
			data: {
				type: Array,
				default: () => []
			},

		},
		components:{
			ListItem
		},
		data() {
			return {
				// isPage: 0, // 0是首页，1是友伴官
				listData: [], // 页面数据
			};
		},
		watch: {
			data: {
				handler() {
					this.listData = this.data.map(res => ({
						...res
					}))
				},
				deep: true,
				immediate: true
			}
		},

	}
</script>

<style lang="less" scoped>
	.artist-list-box{
		.content{
			#flex(-,space-between,center);
			flex-wrap: wrap;
			width: 100%;
			
			.item{
				#box(calc(50% - 12rpx),360rpx,18rpx);
				box-shadow: 0px 0px 8px 3px rgba(210, 211, 213, 0.5);
				overflow: hidden;
				margin-bottom: 24rpx;
			}
		}
	}
</style>